<script lang="ts" setup>
  import {
    bindElderDevice,
    getDeviceModels,
    getDevices,
  } from '@/api-new/devices';
  import { affiliatedYear } from '@/api-new/dict';
  import { queryElders } from '@/api-new/elderly';
  import { queryInstitutions } from '@/api-new/organizational-management';
  import { useForm } from '@/hooks/arco/useForm';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { Message } from '@arco-design/web-vue';

  const yearSelect = useSelectOption({
    name: '所属年度',
    apiFun: affiliatedYear,
    fieldNames: {
      label: 'name',
      value: 'id',
    },
  });

  const institutionsSelect = useSelectOption({
    name: '归属机构',
    apiFun: queryInstitutions,
    fieldNames: {
      label: 'instName',
      value: 'instId',
    },
  });

  const form = useForm({
    state: {
      deviceModel: '',
      elderId: '',
      deviceId: '',
      institutionId: '',
      yearId: '',
    },
    rules: {
      deviceModel: {
        required: true,
        message: '请选择设备型号',
      },
      deviceId: {
        required: true,
        message: '请选择设备编码',
      },
      elderId: {
        required: true,
        message: '请选择长者',
      },
      yearId: {
        required: true,
        message: '请选择归属年份',
      },
      institutionId: {
        required: true,
        message: '请选择所属机构',
      },
    },
  });

  const modelSelect = useSelectOption({
    name: '设备型号',
    apiFun: getDeviceModels,
    fieldNames: {
      value: 'modelId',
      label: 'modelName',
      extra: 'deviceType',
    },
    leader: true,
    enhanceExtraData: true,
    getValue() {
      return form.state.deviceModel;
    },
  });

  const deviceSelect = useSelectOption({
    name: '设备编码',
    immediate: false,
    getValue() {
      return form.state.deviceId;
    },
    apiFun: (modelId: string, deviceTypeId: string) => {
      console.log('modelId', modelId, deviceTypeId);

      return getDevices({
        modelId,
        deviceTypeId,
      });
    },
    fieldNames: {
      value: 'deviceId',
      label: 'deviceSn',
    },
    upstream: modelSelect,
  });

  const elderSelect = useSelectOption({
    name: '长者',
    apiFun: queryElders,
    fieldNames: {
      value: 'elderId',
      label: 'name',
    },
  });

  const modal = useModeModalBinder({
    modes: ['add', 'edit'] as const,
    async onOkClick(mode) {
      await form.validate();
      return bindElderDevice(form.state).then((res) => {
        Message.success('绑定成功');
      });
    },
  });

  defineExpose(modal.expose);
</script>

<template>
  <a-modal width="800px" v-bind="modal.bindProps">
    <a-form v-bind="form.bindProps" layout="vertical">
      <!-- 长者信息 -->
      <a-card class="mb-4">
        <template #title>
          <div class="flex items-center">
            <icon-relation class="mr-2" />
            <span>设备信息</span>
          </div>
        </template>
        <div class="grid grid-cols-2 gap-4">
          <a-form-item field="deviceModel" label="设备型号" required>
            <a-select
              v-model="form.state.deviceModel"
              v-bind="modelSelect.bindProps"
            />
          </a-form-item>
          <a-form-item field="deviceId" label="设备编码" required>
            <a-select
              v-model="form.state.deviceId"
              v-bind="deviceSelect.bindProps"
            />
          </a-form-item>
        </div>
      </a-card>

      <a-card class="mb-4">
        <template #title>
          <div class="flex items-center">
            <icon-user class="mr-2" />
            <span>人员信息</span>
          </div>
        </template>
        <div class="grid grid-cols-2 gap-4">
          <a-form-item field="institutionId" label="归属机构" required>
            <a-select
              v-model="form.state.institutionId"
              v-bind="institutionsSelect.bindProps"
            />
          </a-form-item>
          <a-form-item field="yearId" label="所属年度" required>
            <a-select
              v-model="form.state.yearId"
              v-bind="yearSelect.bindProps"
            />
          </a-form-item>
          <a-form-item field="elderId" label="选择长者" required>
            <a-select
              v-model="form.state.elderId"
              v-bind="elderSelect.bindProps"
            />
          </a-form-item>
        </div>
      </a-card>
    </a-form>
  </a-modal>
</template>

<style scoped>
  .mb-4 {
    margin-bottom: 1rem;
  }
</style>
